<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div1{
				width:200px;
				height:200px;
				background:paleturquoise;
				position:absolute;
			}
		</style>
	</head>
	<body>
		<div id="box" class="div1"></div>
		<script>
			var box = document.getElementById("box");
			box.onmousedown = function(){
				document.onmousemove = function(e){
					var oEv = e || event ;
					box.style.left = oEv.clientX-box.offsetWidth/2 + "px";
					box.style.top = oEv.clientY-box.offsetHeight/2 + "px";
				}
			}
			box.onmouseup = function(){
				box.style.width = box.offsetWidth/2 + "px";
				box.style.height = box.offsetHeight/2 + "px";
			    document.onmousemove = null;
			}
		</script>
	</body>
</html>
